<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <style>
        .ttable {
            width: 300px;
        }
    </style>
</head>

<body>
    <input type="button" value="获取数据" id="j_btnGetData" />
    <table class="table ttable">
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="j_tbData">
        </tbody>
    </table>
    <script>
        var data = [{
            name: "传智播客",
            url: "http://www.itcast.cn",
            type: "IT最强培训机构"
        }, {
            name: "黑马程序员",
            url: "http://www.itheima.com",
            type: "大学生IT培训机构"
        }, {
            name: "传智前端学院",
            url: "http://web.itcast.cn",
            type: "前端的黄埔军校"
        }];
        $("#j_btnGetData").click(function() {
            for (var i = 0; i < data.length; i++) {

                var s = "<tr>";
                for (var key in data[i]) {
                    s += "<td>" + data[i][key] + "</td>"
                }
                s += "</tr>"
                $("tbody").append(s);
            }
        })
    </script>

</body>

</html>